<template>
	<u-navbar :border-bottom="false" backIconColor="#333333" titleColor="#333333" :is-back="true" title="会员信息"
		:background="{}" class="navbg"></u-navbar>
	<view class="bg">
		<image :src="`${urls.baseImgUrl}${inits.activeImg}`" mode="widthFix" class="bg-img"></image>
		<view class="info-card" :class="inits.activeClass">
			<view class="status" v-if="inits.userinfo.m_level_id == inits.chosseObj.id">当前等级</view>
			<view style="position: absolute;right: 40rpx;top: 40rpx;" class="font-24" v-if="differenceTime(inits.userinfo.mlevel_pass_time)">卡号 {{inits.userinfo.member_no}}
			</view>
			<view class="info">
				<view class="name">知年喜舍 | {{inits.chosseObj.level_title}}</view>
				<view class="times" v-if="differenceTime(inits.userinfo.mlevel_pass_time)">有效期
					{{filterDate(inits.userinfo.mlevel_pass_time)}}
				</view>
				<view class="times mt-20 u-text-right mr-20" @click="jump">
					开通记录
					<u-icon name="arrow-right" size="20rpx" :color="inits.color" />
				</view>
			</view>
		</view>
	</view>
	<view>
		<view class="plr-30" style="background: #fff;padding-bottom: 45rpx;">
			<view class="font-32" style="margin-bottom: 33rpx;">选择会员等级</view>
			<view class="flex flex-jc-sb">
				<view v-for="(item,i) in inits.list" :key="i" class="card flex flex-dir-c flex-ai-c flex-jc-c"
					:class="[inits.index === i ? 'active' : '',inits.index === i ? inits.activeClass : '']"
					@click="changeList(i)">
					<view class="font-28 title">{{item.level_title}}</view>
					<view class="font-24">￥<text style="font-size: 48rpx;"><text
								class="font-bold">{{Number(item.level_money)}}</text></text>/年</view>
				</view>
			</view>
			<view class="flex flex-jc-c flex-ai-c font-22 mt-30">
				<radio :checked="inits.radioShow" color="#FF0000" @click="inits.radioShow = !inits.radioShow"
					style="transform:scale(0.7)"></radio>
				<view style="color: #999999;">
					阅读并同意<text @click="skip(0)" style="color: #333333;">《知年喜舍会员协议》</text>和<text @click="skip(1)"
						style="color: #333333;">《知年喜舍隐私政策》</text>
				</view>
			</view>
			<!-- <view class="font-22" style="color: #999999;margin-left: 88rpx;">虚拟商品，一经购买，不可退还</view> -->
		</view>

		<view style="padding-top: 38rpx;background: #F7F7F7;" class="plr-30">
			<view class="font-28 font-bold mb_30"><text style="border-bottom: 4rpx solid #333333;">权益对比</text></view>
			<view style="border: 1px solid #999999;border-radius: 20rpx;">
				<view class="flex vip">
					<view class="vip-1">权益</view>
					<view class="vip-2">{{inits?.list[0].level_title}}</view>
					<view class="vip-3">{{inits?.list[1].level_title}}</view>
					<view class="vip-4">{{inits?.list[2].level_title}}</view>
				</view>
				<view class="flex vip">
					<view class="vip-5">
						<view v-for="(item,i) in inits.qy" :key="i">
							{{item.name}}
						</view>
					</view>
					<view class="vip-6">
						<view v-for="(item,i) in inits.qy" :key="i">
							{{inits?.list[0][item.feild] == 0 ? 'x' : inits?.list[0][item.feild]}}
						</view>
					</view>
					<view class="vip-7">
						<view v-for="(item,i) in inits.qy" :key="i">
							{{inits?.list[1][item.feild] == 0 ? 'x' : inits?.list[1][item.feild]}}
						</view>
					</view>
					<view class="vip-8">
						<view v-for="(item,i) in inits.qy" :key="i">
							{{inits?.list[2][item.feild] == 0 ? 'x' : inits?.list[2][item.feild]}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 200rpx;background: #F7F7F7;"></view>
	</view>

	<view class="btn" @click="confirm">
		<view>确认协议并立即开通</view>
	</view>

</template>

<script lang="ts" setup>
	import {
		reactive, watch
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import vip from '../../api/vip.js';
	import urls from '../../api/baseUrl.js';
	import user from '../../api/user.js';
	let inits: any = reactive({
		activeClass: 'active-0',
		index: 0,
		radioShow: false,
		color: '#A6C0E0',
		list: [{}, {}, {}],
		chosseObj: {},
		activeImg: 'bg-p.jpg',
		userinfo: uni.getStorageSync('userInfo') || {},
		qy: [
			{
				name: '分销佣金',
				feild: 'in_dis_radio_percentage'
			},
			{
				name: '房价折扣',
				feild: 'in_house_radio'
			},
			{
				name: '洗漱套装',
				feild: 'in_suit'
			},
			{
				name: '市内旅游',
				feild: 'in_tourism'
			},
			{
				name: '康养套装',
				feild: 'in_health_per'
			},
			{
				name: '智能穿戴设备',
				feild: 'in_smart_wea'
			},
			{
				name: '景区套票',
				feild: 'in_ticket_area'
			},
			{
				name: '免费客房',
				feild: 'in_free_room'
			},
		]
	})
	const getMemberInfo = async (token ?: string) => {
		const res = await user.getMemberInfo()
		if (res.code == 200) {
			inits.userinfo = res.data
			if(res.data.is_agent) {
				inits.qy.splice(0,1)
			}
			uni.setStorageSync('userInfo', res.data)
		}
	}
	const changeList = (i : number) => {
		inits.index = i
		inits.chosseObj = inits.list[i]
	}
	const skip = (type : number) => {
		uni.navigateTo({
			url: `/pages/common/sysconfig?type=${type}`
		})
	}
	const jump = () => {
		uni.navigateTo({
			url: '/pages/vip/orderList'
		})
	}
	const memberCorder = async (id : string | number) => {
		const res = await vip.memberCorder({
			member_card_id: id
		})
		if (res.code === 200) {
			uni.requestOrderPayment({
				...res.data.payRes,
				success() {
					showMsg('支付成功')
					getMemberInfo()
				},
				fail(err2) {
					if (err2.errMsg === 'requestPayment:fail cancel') {
						showMsg('您已取消支付')
					} else {
						showMsg('支付失败')
					}
				}
			})
		}
	}
	const confirm = () => {
		if (!inits.radioShow) return uni.showToast({
			title: '请阅读并勾选协议',
			icon: 'none'
		})
		let i : any = inits.chosseObj
		memberCorder(i.id)
	}
	const getMemberCard = async () => {
		const res = await vip.getMemberCard({
			page: 1,
			size: 3
		})
		if (res.code !== 200) return
		inits.list = res.data
		if (res.data.length) inits.chosseObj = res.data[0]
	}
	const filterDate = (time: any) => {
		const date = new Date(time * 1000)
		return `${date.getFullYear()}-${date.getMonth()+1}-${date.getDate()} ${date.getHours()}:${date.getMinutes()}:${date.	getSeconds()}`
	} 
	const differenceTime = (time : any) => {
		if (!time) return false
		// @ts-ignore
		let timestamp : any = (Date.parse(new Date())) / 1000; //计算当前时间戳
		// @ts-ignore
		return time > timestamp ? true : false
	}
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
	watch(() => inits.index, (i) => {
		inits.activeClass = 'active-' + i
		// inits.color
		switch (i) {
			case 0:
				inits.color = '#A6C0E0'
				inits.activeImg = 'bg-p.jpg'
				break
			case 1:
				inits.color = '#717D7D'
				inits.activeImg = 'bg-y.jpg'
				break
			case 2:
				inits.color = '#734328'
				inits.activeImg = 'bg-j.jpg'
				break
		}
	})
	onLoad(() => {
		getMemberInfo()
		getMemberCard()
	})
</script>
<style>
	page {
		/* background: #F7F7F7; */
		min-height: 100%;
	}
</style>
<style lang="scss" scoped>
	.navbg {
		position: absolute;
		top: 0;
	}

	.slot-wrap {
		padding: 0 0 0 25rpx;

		.text {
			font-weight: 400;
			font-size: 32rpx;
			color: #fff;
		}
	}

	.bg {
		width: 100%;
		height: 500rpx;
		clip-path: ellipse(110% 50% at 50% 40%);
		position: relative;
		overflow: hidden;

		.info-card {
			margin: 0 35rpx;
			border-radius: 15rpx;
			position: absolute;
			width: calc(100% - 70rpx);
			z-index: 10;
			bottom: 40rpx;
			left: 0;
			height: 250rpx;
			overflow: hidden;

			.status {
				position: absolute;
				left: 0;
				top: 0;
				padding: 7rpx 12rpx;
				font-size: 20rpx;
				border-top-left-radius: 15rpx;
				border-bottom-right-radius: 15rpx;
				z-index: 100;
			}

			.info {
				padding-left: 60rpx;
				z-index: 100;
				margin-top: 64rpx;

				.name {
					font-size: 32rpx;
					margin-bottom: 15rpx;
				}

				.times {
					font-size: 20rpx;
				}
			}
		}

		.bg-img {
			width: 100%;
			height: 100%;
			position: absolute;
			left: 0;
			top: 0;
		}
	}

	.active {
		width: 216rpx;
		height: 162rpx;
		background: #316CBA;
		border-radius: 10rpx;
		color: #fff !important;
		border: none !important;

		.title {
			color: #fff !important;
		}
	}

	.active-0 {
		background: linear-gradient(67deg, #439AE5 0%, #316CBA 100%);
		color: #A6C0E0;

		.status {
			background-color: #316CBA !important;
			color: #fff;
		}

		.name {
			color: #fff;
		}

		.times {
			color: #A6C0E0;
		}
	}

	.active-1 {
		background: radial-gradient(40% 134% at -4% 88%, #E0E4E4 0%, #BFC5C5 100%);
		color: #717D7D;

		.status {
			background-color: #BFC5C5 !important;
			color: #fff;
		}

		.name {
			color: #717D7D;
		}

		.times {
			color: #717D7D;
		}
	}

	.active-2 {
		background: radial-gradient(40% 134% at -4% 88%, #F5DFB9 0%, #CCA570 100%);
		color: #734328;

		.status {
			background-color: #CCA570 !important;
			color: #fff;
		}

		.name {
			color: #77472C;
		}

		.times {
			color: #77472C;
		}
	}

	.card {
		color: #FCDC87;
		width: 216rpx;
		height: 162rpx;
		border-radius: 10rpx;
		border: 1rpx solid #999999;
		text-align: center;

		.title {
			color: #643E08;
		}
	}

	.vip>view {
		width: 25%;
		font-size: 24rpx;
		font-weight: 600;
		text-align: center;
		line-height: 80rpx;
	}

	.vip {

		.vip-1 {
			background: #F5F5F5;
		}

		.vip-2 {
			background: linear-gradient(135deg, #6A96F9 0%, #162DCA 100%);
			color: #fff;
		}

		.vip-3 {
			background: #F5F5F5;
		}

		.vip-4 {
			background: linear-gradient(135deg, #FEF0BF 0%, #FFCAAB 100%);
			border-radius: 0rpx 20rpx 0rpx 0rpx;
		}

		.vip-5 {}

		.vip-6 {
			background: #DFEAFF;
		}

		.vip-7 {
			background: #fff;
		}

		.vip-8 {
			background: #FEF5E6;
		}
	}

	.btn {
		position: fixed;
		bottom: 62rpx;
		width: 100%;

		view {
			font-weight: bold;
			text-align: center;
			line-height: 88rpx;
			color: #62371F;
			height: 88rpx;
			font-size: 30rpx;
			margin: 0 30rpx;
			background: radial-gradient(0% 127% at 39% 50%, #FCDC87 0%, #FCDC87 100%);
			border-radius: 44rpx;
		}
	}
</style>